<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="js/jquery.js"></script>
		<title></title>
		<style type="text/css">
			.box{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				top:0;
				left:0;
				
			}
			.warp{
				width: 100px;
				height: 100px;
				background: green;
				position: absolute;
				top:50%;
				left:50%;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="warp"></div>
		
		
		<!--<script src="js/bound.js" type="text/javascript" charset="utf-8"></script>-->
		<script type="text/javascript">
			
			$('.box').on('mousedown',function(ev){
				var x = ev.pageX;
				var y = ev.pageY;
				var l = parseFloat($('.box').css('left'));
				var t = parseFloat($('.box').css('top'));
				
				// 给文档加事件
				$(document).on('mousemove',function(ev){
					var disX = ev.pageX - x;
					var disY = ev.pageY - y;
					// 给box重新设置位置
					$('.box').css({
						left:l+disX,
						top:t+disY
					})
					
					// 在拖动的时候,获取box的位置
					var red = $('.box')[0].getBoundingClientRect();
					var green = $('.warp')[0].getBoundingClientRect();
					// console.log(obj1,obj2)
					if(red.right>=green.left && red.bottom>= green.top && red.top<= green.bottom && red.left<= green.right){
						// console.log('ok')
						$('.warp').css({
							background:'#999'
						})
					}else{
						$('.warp').css({
							background:'green'
						})
					}
				})
				
				// 抬起鼠标,把事件解绑
				$(document).on('mouseup',function(){
					$(document).off('mousemove');
				})
			})
		</script>
	</body>
</html>
